<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <!-- 订单表单 -->
      <orderForm 
      v-if="ticketChooseList" 
      :ticketChooseList="ticketChooseList" 
      @getTotalPrice="getTotalPrice"
      @getUsersLength="getUsersLength"
      @getInsurancesPrice="getInsurancesPrice"
      />

      <!-- 侧边栏 -->
      <orderAside 
      v-if="ticketChooseList" 
      :ticketChooseList="ticketChooseList" 
      :totalPrice="totalPrice"
      :UsersLength="UsersLength"
      :insurancesPrice="insurancesPrice"
      />
    </el-row>
  </div>
</template>

<script>
import orderForm from "@/components/air/orderForm";
import orderAside from "@/components/air/orderAside";

export default {
  components: {
    orderForm,
    orderAside
  },

  data() {
    return {
      // 选择机票的数据
      ticketChooseList: '',
      // 表单子组件传过来的总价
      totalPrice:0,
      // 表单子组件传过来的乘机人的数组长度
      UsersLength:1,
      // 表单子组件传过来的保险总价
      insurancesPrice:0
    };
  },

  created() {
    this.$axios({
      url: "/airs/" + this.$route.query.id,
      params: {
        seat_xid: this.$route.query.seat_xid
      }
    }).then(res => {
      // console.log("选择机票返回的结果", res);

      // 将返回的结果保存到data中
      this.ticketChooseList = res.data;
      console.log('选择机票',this.ticketChooseList);
    });
  },

  methods: {
    // 处理表单子组件发射过来的总价
    getTotalPrice(totalPrice){
      this.totalPrice = totalPrice;
    },

    // // 处理表单子组件发射过来的乘机人的数组长度
    getUsersLength(UsersLength){
      this.UsersLength = UsersLength;
    },

    // 处理表单子组件发射过来的保险总价
    getInsurancesPrice(insurancesPrice){
      this.insurancesPrice = insurancesPrice;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}

</style>